跳到主要内容

标签控件（TabWidget）

TabWidget 类提供了一个带有标签页的控件堆栈。标签控件包含一个标签栏（tab bar）和一个页面区域（page area），页面区域用于显示与每个标签相关的内容。

  • 默认情况下，标签栏显示在页面区域的上方，但可以通过配置更改标签栏的位置（TabPosition）。
  • 在页面区域中，只有当前页面会被显示，其他页面会被隐藏。
  • 用户可以通过点击标签来切换显示不同的页面。

使用 add() 或 insert() 方法将页面控件添加到标签控件中，并为每个标签指定合适的标签文本。

可以使用 setTabText() 或 setTabIcon() 方法更改标签的文本和图标。

事件​

当用户点击标签切换页面，或者通过编程方式更改当前页面时，会触发 indexChanged 事件。

监听索引更改事件​

// 监听索引更改事件
tabWidget.bind('indexChanged', (event: IndexChangeEvent): void => {
    event.index; // 输出当前页面的索引
});

示例代码​

以下代码展示了如何创建一个标签控件：

const desktop = Desktop.instance(); // 获取桌面实例
const tabWidget = new TabWidget(desktop); // 创建标签控件并添加到桌面
tabWidget.size = new Size(380, 320); // 设置标签控件的尺寸

// 创建三个页面控件
const page1 = new Widget();
const page2 = new Widget();
const page3 = new Widget();

// 将页面控件添加到标签控件中，并设置标签文本
tabWidget.add(page1, 'Page 1');
tabWidget.add(page2, 'Page 2');
tabWidget.add(page3, 'Page 3');

如果需要将标签绘制到页面的右侧，可以设置 tabPosition 属性：

...
tabWidget.tabPosition = TabPosition.East;
...